/**
 * Created by Freeman on 2018/2/8.
 */
import React from 'react'
import {ActivityIndicator, StyleSheet, Text, TouchableOpacity, View} from 'react-native'
import PropTypes from 'prop-types'
import {COLOR,} from "../../../config/index";
import variables from '../variables'

class Button extends React.Component {

  constructor(props) {
    super(props)
    this.onPressIn = this.onPressIn.bind(this)
    this.onPressOut = this.onPressOut.bind(this)
    this.state = {
      pressIn: false,
    };
  }

  onPressIn(...arg) {
    const {onPressIn} = this.props
    this.setState({pressIn: true});
    if (onPressIn) {
      onPressIn(...arg);
    }
  }

  onPressOut(...arg) {
    const {onPressOut} = this.props
    this.setState({pressIn: false});
    if (onPressOut) {
      onPressOut(...arg);
    }
  }

  render() {
    const {
      size = 'large', type = 'default', disabled, onClick, style,
      loading, ...restProps,
    } = this.props

    const wrapperStyle = [
      styles.wrapper,
      styles[`${size}Raw`],
      styles[`${type}Raw`],
      disabled && styles[`${type}DisabledRaw`],
      style
    ]

    const textStyle = [
      styles[`${size}RawText`],
      styles[`${type}RawText`],
      disabled && styles[`${type}DisabledRawText`],
      this.state.pressIn && styles[`${type}HighlightText`],
    ];

    return (
      <TouchableOpacity
        style={wrapperStyle}
        onPress={(e) => onClick && onClick(e)}
        onPressIn={this.onPressIn}
        onPressOut={this.onPressOut}
        disabled={disabled}
        {...restProps}
      >
        <View style={styles.container}>
          {
            loading &&
            <ActivityIndicator
              //style={_styles.indicator}
              animating
              color={COLOR.indicatorColor}
              size="small"
            />
          }

          <Text style={textStyle}>{this.props.children}</Text>
        </View>

      </TouchableOpacity>

    )
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
  },
  defaultHighlight: {
    backgroundColor: variables.fill_tap,
    borderColor: variables.border_color_base,
  },
  primaryHighlight: {
    backgroundColor: variables.primary_button_fill_tap,
    borderColor: variables.primary_button_fill,
  },
  ghostHighlight: {
    backgroundColor: 'transparent',
    borderColor: variables.ghost_button_fill_tap,
  },
  warningHighlight: {
    backgroundColor: variables.warning_button_fill_tap,
    borderColor: variables.warning_button_fill,
  },
  wrapper: {
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: variables.radius_md,
    borderWidth: 1,
  },
  largeRaw: {
    height: variables.button_height,
    paddingLeft: variables.h_spacing_lg,
    paddingRight: variables.h_spacing_lg,
  },
  smallRaw: {
    height: variables.button_height_sm,
    paddingLeft: variables.h_spacing_sm,
    paddingRight: variables.h_spacing_sm,
  },
  defaultRaw: {
    backgroundColor: variables.fill_base,
    borderColor: variables.border_color_base,
  },
  primaryRaw: {
    backgroundColor: variables.primary_button_fill,
    borderColor: variables.primary_button_fill,
  },
  ghostRaw: {
    backgroundColor: 'transparent',
    borderColor: variables.ghost_button_color,
  },
  warningRaw: {
    backgroundColor: variables.warning_button_fill,
    borderColor: variables.warning_button_fill,
  },
  defaultDisabledRaw: {
    backgroundColor: variables.fill_disabled,
    borderColor: variables.fill_disabled,
  },
  primaryDisabledRaw: {
    opacity: 0.4,
  },
  ghostDisabledRaw: {
    borderColor: `${variables.color_text_base}1A`, // alpha 10%  https://codepen.io/chriscoyier/pen/XjbzAW
  },
  warningDisabledRaw: {
    opacity: 0.4,
  },
  defaultHighlightText: {
    color: variables.color_text_base,
  },
  primaryHighlightText: {
    color: `${variables.color_text_base_inverse}4D`, // alpha 30%  https://codepen.io/chriscoyier/pen/XjbzAW
  },
  ghostHighlightText: {
    color: variables.ghost_button_fill_tap,
  },
  warningHighlightText: {
    color: `${variables.color_text_base_inverse}4D`, // alpha 30%  https://codepen.io/chriscoyier/pen/XjbzAW
  },
  largeRawText: {
    fontSize: variables.button_font_size,
  },
  smallRawText: {
    fontSize: variables.button_font_size_sm,
  },
  defaultRawText: {
    color: variables.color_text_base,
  },
  primaryRawText: {
    color: variables.color_text_base_inverse,
  },
  ghostRawText: {
    color: variables.ghost_button_color,
  },
  warningRawText: {
    color: variables.color_text_base_inverse,
  },
  defaultDisabledRawText: {
    color: `${variables.color_text_base}4D`, // alpha 30%  https://codepen.io/chriscoyier/pen/XjbzAW
  },
  primaryDisabledRawText: {
    color: `${variables.color_text_base_inverse}99`, // alpha 60%  https://codepen.io/chriscoyier/pen/XjbzAW
  },
  ghostDisabledRawText: {
    color: `${variables.color_text_base}1A`, // alpha 10%  https://codepen.io/chriscoyier/pen/XjbzAW
  },
  warningDisabledRawText: {
    color: `${variables.color_text_base_inverse}99`, // alpha 60%  https://codepen.io/chriscoyier/pen/XjbzAW
  },
  indicator: {
    marginRight: variables.h_spacing_md,
  },
})


Button.propTypes = {
  type: PropTypes.oneOf(['primary', 'warning', 'ghost']),
  size: PropTypes.oneOf(['large', 'small']),
  disabled: PropTypes.bool,
  onClick: PropTypes.func,
  loading: PropTypes.bool,
  style: PropTypes.object,
}

export default Button
